<template>
  <div id="box">
    <div id="from" style="width: 600px;margin: auto">
      <h2 style="margin-left: 200px">电影信息修改</h2>
      <el-form ref="form" :model="movies" label-width="80px">
        <el-form-item label="电影名称">
          <el-input v-model="movies.fnName" class="inp" />
        </el-form-item>

        <el-form-item label="电影导演">
          <el-input v-model="movies.fnDirector" class="inp" />
        </el-form-item>

        <el-form-item label="主要演员">
          <el-input v-model="movies.fnActor" class="inp" />
        </el-form-item>

        <el-form-item label="语言选择">
          <el-select v-model="movies.fnLanguage" placeholder="请选择放映语言">
            <el-option label="中文" value="中文" />
            <el-option label="英文" value="英文" />
          </el-select>
        </el-form-item>

        <el-form-item label="场厅选择">
          <el-select v-model="movies.fnSence" placeholder="请选择播放场厅">
            <el-option label="1号激光厅" value="1" />
            <el-option label="2号激光厅" value="2" />
            <el-option label="3号激光厅" value="3" />
            <el-option label="4号激光厅" value="4" />
            <el-option label="5号激光厅" value="5" />
            <el-option label="6号激光厅" value="6" />
            <el-option label="7号激光厅" value="7" />
            <el-option label="8号激光厅" value="8" />
            <el-option label="9号激光厅" value="9" />
            <el-option label="10号激光厅" value="10" />
          </el-select>
        </el-form-item>

        <el-form-item label="电影类型">
          <el-radio-group v-model="movies.fnType">
            <el-radio label="犯罪悬疑" />
            <el-radio label="动作犯罪" />
            <el-radio label="喜剧动作" />
            <el-radio label="剧情爱情" /><br>
            <el-radio label="科幻动作" />
            <el-radio label="人物传记" />
            <el-radio label="古装剧情" />
            <el-radio label="灾难冒险" />
          </el-radio-group>
        </el-form-item>

        <el-form-item label="片长(分钟)">
          <el-input v-model="movies.fnTime" type="number" style="width: 200px" class="inp" />
        </el-form-item>

        <el-form-item label="票价设置">
          <el-input v-model="movies.fnPrice" type="number" style="width: 200px" class="inp" />
        </el-form-item>

        <el-form-item label="电影简介">
          <el-input v-model="movies.fnIntro" type="textarea" style="width: 500px" />
        </el-form-item>

        <el-form-item id="buttall">
          <el-button type="primary" @click="onSubmit(movies)">立即修改</el-button>
          <el-button id="butt2" @click="retu">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
import Qs from 'qs'
export default {
  name: 'UpdataHotMovieInfor',
  data() {
    return {
      movies: {
        fnId: '',
        fnName: '误杀',
        fnDirector: '嗷嗷嗷',
        fnActor: '武警 妮妮 SaaS',
        fnLanguage: '中文',
        fnSence: '2',
        fnType: '人物传记',
        fnTime: '120',
        fnPrice: '40',
        fnIntro: '是不是市十四师'
      }
    }
  },
  created() {
    this.isShowUpdataInfor()
  },

  methods: {
    isShowUpdataInfor() {
      var vm = this
      var fnId = this.$route.params.fnId
      this.axios({
        url: 'http://localhost:81/api/hot/seleUpdataHotMovie',
        params: { 'fnId': fnId }
      }).then(function(res) {
        if (res.data.success) {
          vm.movies = res.data.data
        }
      })
    },

    onSubmit(nowFilm) {
      console.log('============' + nowFilm)
      var vm = this
      this.axios({
        url: 'http://localhost:81/api/hot/updataHotMovie',
        method: 'post',
        transformRequest: [function(data) {
          return Qs.stringify(data)
        }],
        data: nowFilm
      }).then(function(res) {
        console.log(res.data.data)
        if (res.data.success) {
          vm.$message({ // 显示修改成功
            type: 'success',
            message: '修改成功!'
          })
          vm.$router.push('/HotIndext')
        } else {
          vm.$message({ // 显示修改失败
            type: 'info',
            message: '修改失败!'
          })
        }
      })
    },
    retu() {
      this.$router.push({ name: 'HotIndext' })
    }

  }
}
</script>

<style scoped>
  #box{
    width: 660px;
    height: 700px;
    border: 1px solid #DCDFE6;
    border-radius: 8px;
    margin-left: 280px;
    margin-top: 30px;
  }
  .inp{
    width: 500px;
  }
  #buttall{
    margin-left: 70px;
  }
  #butt2{
    margin-left: 70px;
  }
</style>
